import { useRef } from 'react';
import ReactECharts from 'echarts-for-react';

interface PieChartProps {
    data: Array<{ name: string; value: number }>;
    title: string;
  }
  
// 定义饼图组件
const PieChart = ({ data, title}: PieChartProps) => {
  const chartRef = useRef(null);

  // 初始化图表配置
  const getOption = () => {
    return {
      title: {
        text: title,
        subtext: '示例数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框格式化器
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: data.map(item => item.name) // 图例数据
      },
      series: [
        {
          name: title,
          type: 'pie',
          radius: '50%',
          data: data, // 数据源
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)' // 高亮时的阴影效果
            }
          }
        }
      ]
    };
  };

  return (
    <div className='w-[50%]'>
      <ReactECharts 
        ref={chartRef}
        option={getOption()} // 设置图表选项
        notMerge={true}
        lazyUpdate={true}
        style={{ height: '400px', width: '100%' }}
      />
    </div>
  );
};

export default PieChart;